<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="case-menus-dialog" v-if="visible">
                <div class="case-menus-dialog__mask"></div>
                <div class="case-menus-dialog__content">
                    <div class="case-menus-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close-black.svg`" />
                    </div>

                    <div class="case-menus-dialog__title">
                        案例体验
                    </div>
                    <!-- list -->
                    <div v-for="(list_, index_) in props.dataList" :key="list">
                        <div class="list-ul" @click="clickUL(index_)">
                            <span class="list-ul__text">{{ list_.name }}</span>
                            <span :class="['list-ul__arrow', activeListId === index_ ? '' : 'arrow_tranf']">
                                <img :src="`/img/caret-bottom.svg`" :width="21">
                            </span>
                        </div>
                        <div :class="['list-table']" :style="{ display: activeListId === index_ ? 'block' : 'none' }">
                            <ul class="t_ul" v-for="(item, index) in list_.children">
                                <li class="t_li t_li_0" v-if="index === 0">
                                    <div class="t_li_l"> 序号 </div>
                                    <div div class="t_li_r"> {{ list_.name }} </div>
                                </li>
                                <li li class="t_li" v-if="index === 0" @click="jumpUrl(item.value)">
                                    <div class="t_li_l"> {{ index + 1 }}</div>
                                    <div class="t_li_r">{{ item.key }}</div>
                                </li>
                                <li li class="t_li" v-else @click="jumpUrl(item.value)">
                                    <div class="t_li_l"> {{ index + 1 }}</div>
                                    <div class="t_li_r">{{ item.key }}</div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { useContent } from ".";
const { visible, listData_ } = useContent();
const activeListName = ref('')
const activeListId = ref(0)

const props = defineProps({
    dataList: {
        type: Array,
        default: () => [],
    }
});
defineExpose({
    show(_id) {
        visible.value = true;
    },
});

const jumpUrl = (url) => {
    console.log(url, 'url-------')
    window.open(url);
}

const clickUL = (id) => {
    if (id === activeListId.value) {
        activeListId.value = ''
    }
    console.log(id, '------------', activeListId.value)
    activeListId.value = id
}

const onClose = () => {
    visible.value = false;
    activeListId.value = 0;
};

</script>
<style lang="scss" scoped>
.case-menus-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        background-color: #fff;
        border-radius: 10px;
        transform: translate(-50%, -50%);
        padding: 43px 20px 43px;
    }

    &__title {
        position: absolute;
        left: 50%;
        top: 22px;
        font-size: 18px;
        transform: translate(-50%, -50%);
    }

    .list-ul {
        background-color: #5085FB;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 8px;

        &__text {
            font-size: 16px;
            color: #FFF;
            padding: 8px 20px;
        }

        &__arrow {
            transition: all 0.3s;
            padding: 8px 20px;
        }

        .arrow_tranf {
            transform: rotate(-90deg);
        }
    }

    .list-table {
        max-height: 200px;
        overflow-y: scroll;
        margin-top: 5px;
        border-left: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        transition: all 0.5s;

        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .t_ul {}

        .t_li,
        .t_li_0 {
            display: flex;
            flex-direction: row;
            text-align: center;
            color: #666666;
            font-size: 12px;

            .t_li_l,
            .t_li_r {
                border: 1px solid #EAEAEA;
                padding: 8px 0px;
                border-left: 0;
                border-bottom: 0;
            }

            .t_li_l {
                width: 100px;
            }

            .t_li_r {
                width: 100%;
                cursor: pointer;
            }
        }

        .t_li_0 {
            background-color: #CADAFE;
            color: #5085FB;
        }
    }

    .menus-list {
        .menus-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 42px;
            background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/btn-bg.png");
            background-size: 100% 100%;
            margin-top: 20px;
            font-size: 18px;
            color: #fff;
            cursor: pointer;

            &.is-disabled {
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/btn-default.png");
                color: #333;
                cursor: default;
            }
        }
    }

    &__close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
        }
    }
}

/* 设置滚动条整体部分的样式 */
::-webkit-scrollbar {
    width: 3px;
    height: 6px;
}

/* 滚动槽--外层轨道 */
::-webkit-scrollbar-track {
    background: none;
}

/* 内层轨道（不包含滚动块部分） */
::-webkit-scrollbar-track-piece {
    opacity: 0;
    /* 透明度设置为全透明，使得滚动条背景色为网页颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(157, 157, 157, 0.4);
}
</style>
